<template>
  <div>
    <!-- 数据库管理 2018/3/7 11:44 zhangQ -->
    <Form ref="dataBaseForm" label-position="left" :label-width="100">
      <FormItem label="保存名称：">
        <i-input type="text" v-model="formParam.connName" placeholder="名称" style="width:250px"></i-input>
      </FormItem>
      <FormItem label="数据库类型：">
        <Select v-model="formParam.dataSource" clearable style="width:250px">
          <template v-for="item in dataSourceType">
            <Option :value="item.val" :key="item.val">{{ item.title }}</Option>
          </template>
        </Select>
      </FormItem>

      <FormItem label="主机或ip地址：">
        <i-input type="text" v-model="formParam.host" placeholder="主机或ip地址" style="width:250px"></i-input>
      </FormItem>
      <FormItem label="端口号：">
        <i-input type="text" v-model="formParam.port" placeholder="端口号" style="width:250px"></i-input>
      </FormItem>
      <FormItem label="用户名：">
        <i-input type="text" v-model="formParam.user" placeholder="用户名" style="width:250px"></i-input>
      </FormItem>
      <FormItem label="密码：">
        <i-input type="text" v-model="formParam.password" placeholder="密码" style="width:250px"></i-input>
      </FormItem>
      <FormItem label="数据库名称：">
        <i-input type="text" v-model="formParam.database" placeholder="数据库名称" style="width:250px"></i-input>
      </FormItem>
      <Button type="primary" @click="connnectTest">
        测试连接
      </Button>

      <Button type="primary" @click="saveConnStr">
        保存
      </Button>
    </Form>
  </div>
</template>

<script>
  import DbServer from '@/components/common/dbServer'
  import initDb from '@/components/common/indexeddbUtil'

  export default {
    name: 'index',
    data () {
      let dataSourceType = [
        { title: 'mysql', val: 0 }
      ]
      let state = ''
      let formParam = {
        connName: '',
        dataSource: '',
        host: '',
        port: '3306',
        user: 'root',
        password: '123456',
        database: ''
      }
      let datas = { formParam, dataSourceType, state }
      return datas
    },
    computed: {},
    methods: {
      connnectTest () {
        let db = new DbServer()
        db.addConn(this.formParam)
          .then((conn) => {
            this.$Notice.success({
              title: '链接成功',
              desc: '数据库链接成功，地址：' + this.formParam.host + ':' + this.formParam.port + ',' + this.formParam.database
            })
          })
      },
      saveConnStr () {
        initDb(contant.storeNames.connStore.name).then((store) => {
          let request = store.add(this.formParam)
          request.onsuccess = (e) => {
            this.$Notice.success({
              title: '保存成功'
            })
          }
        })
      }
    },
    created () {
    },
    mounted () {
    },
    components: {}
  }

  export let cpnfig = {}
</script>

<style scoped>

</style>
